<template>
    <div class="detail">
        <image class="img" :src="url" mode="widthFix" @tap="lookImage(url)"/>
        <div class="address-like">
            <span class="address">{{address}}</span>
            <image class="like_pic" src="../../static/images/like_active.png"/>
            <span class="like_count">{{count}}</span>
        </div>
        <p class="desc">{{desc}}</p>
        <p class="name">{{name}}</p>
        <div class="loading-container" v-if="getSrcFlag">
            <loading></loading>
        </div>
    </div>
</template>

<script>
import Loading from 'components/loading'
export default {
  name: 'DiaryDetail',
  data () {
    return {
      name: '',
      desc: '',
      url: '',
      getSrcFlag: true,
      timer: null,
      address: '',
      likeList: [],
      count: 0
    }
  },
  components: {
    Loading
  },
  onLoad (e) {
    const that = this
    that.name = e.name
    wx.setNavigationBarTitle({
      title: that.name + '的心情'
    })
    that.url = e.url
    that.desc = e.desc
    that.address = e.address
    that.likeList = JSON.parse(e.likeList)
    if (that.likeList && that.likeList.length > 0) {
      let num = 0
      that.likeList.forEach(item => {
        if (item.type === '2') {
          num++
        }
      })
      that.count = num
    }
    that.timer = setTimeout(() => {
      that.getSrcFlag = false
      wx.setNavigationBarColor({
        frontColor: '#ffffff', // 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
        backgroundColor: that.getRandomColor(),
        animation: {
          duration: 3000,
          timingFunc: 'easeInOut'
        }
      })
    }, 1000)
  },
  onUnload () {
    const that = this
    clearTimeout(that.timer)
    that.name = ''
    that.url = ''
    that.desc = ''
    that.getSrcFlag = true
    that.timer = null
    that.address = ''
  },
  methods: {
    lookImage (img) {
      wx.previewImage({
        current: img, // 当前显示图片的http链接
        urls: [img] // 需要预览的图片http链接列表
      })
    },

    getRandomColor () {
      let rgb = []
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length === 1 ? '0' + color : color
        rgb.push(color)
      }
      return '#' + rgb.join('')
    }
  }
}
</script>


<style lang="stylus" scoped>
.loading-container
    position fixed
    width 100%
    height 100%
    top 0
    bottom 0
    left 0
    right 0
    background #fff
    margin auto
    display flex
    justify-content center
    align-items center
.detail
    height 100%
    .img
        width 100%
    .address-like
        height 80rpx
        padding 0 30rpx
        display flex
        justify-content flex-start
        align-items center
        margin-bottom 60rpx
        .address
            flex 1
            font-size 24rpx
            color #63A92C
        .like_pic
            height 30rpx
            width 30rpx
            margin-right 10rpx
        .like_count
            min-width 20rpx
            height 80rpx
            line-height 80rpx
            font-size 24rpx
            color #d81e06
    .desc
        padding 20rpx 60rpx
        font-size 30rpx
        color #333
        line-height 60rpx
        word-wrap break-word
        white-space pre-wrap
        margin-bottom 200rpx
    .name
        text-align center
        color #999
        margin-bottom 100rpx
        font-size 24rpx
</style>
